<template>
  <view class="category">
    <!-- 1.引入搜索组件 -->
    <ugo-search></ugo-search>
    <!-- 2 内容 -->
    <view class="main">
      <view class="menu">
        <view
          :class="['menu-item', current === index ? 'active' : '']"
          v-for="(item, index) in menus"
          :key="item"
          @click="handleItemSelect(index)"
          >{{ item }}</view
        >
      </view>
      <view class="content">
        <!-- 商品组 -->
        <view class="goods-group" v-for="item1 in goods" :key="item1.car_id">
          <!-- 标题 -->
          <view class="goods-title">{{ item1.cat_name }}</view>
          <!-- 列表 -->
          <view class="goods-list">
            <navigator 
            v-for="item2 in item1.children" 
            :key="item2.car_id"
            :url="'/pages/goods_list/goods_list?id='+item2.cat_id"
            >
              <u-image
                width="120rpx"
                height="120rpx"
                :src="item2.cat_icon"
              ></u-image>
              <view class="goods-name">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/* 
 1 建议 data中定义过的变量 一定要在 模版中 渲染 使用过 

 2 优化代码 
  1 把 categories  提取出去 当作是一个很普通的全局变量即可 
    （data中的变量   1 也是全局变量  2 一定要渲染到页面上！！  ）

3 在uniapp中 定义全局变量 有两种方式
  1 直接在 data中来定义 -  确保这个全局变量 要在模版中渲染出来 
  2 不要在data中定义，而是可以在onLoad 中来定义一下 即可！！ 

 */
export default {
  data() {
    return {
      // categories: [],
      // 控制左侧菜单选中的索引
      current: 0,
      // menus:[],
      // goods:[],
      menus:[],
      goods:[],
    };
  },
  // 使用小程序的生命周期
  onLoad() {
    // 小程序中 缓存 类似 网页 本地存储
    // 小程序中的缓存 代码的写法 比 网页的简单 好用  支持任意的格式 不用 转json！！！
    // localStorage

    // {data:真实的数据,time:时间戳}

    // 就是一个普通的全局变量
    this.categories = []
    // this.getCategory();

    // 获取缓存数据 ""
    const storeCategory = uni.getStorageSync("categories")

    // 判断 该缓存是否存在即可
    if(storeCategory){
      // 有缓存
      // 判断缓存数据有没有过期 重要  10s
      // 时间戳 单位 是 毫秒
      if(Date.now() - storeCategory.time > 1000*10){
        // 过期 重新发起请求
        console.log("过期 重新发起请求");
        this.getCategory()
      }else{
        // 没有过期 可以使用缓存
        console.log("没有过期 可以使用缓存");
        this.categories = storeCategory.data
        this.menus = this.categories.map((item)=>item.cat_name)

      this.goods = this.categories[this.current].children
      }
    }else{
      console.log("没有缓存");
      // 发起请求 获取数据
      this.getCategory()
    }
  },

  methods: {
    // 获取接口数据
    async getCategory() {
      const res = await this.$u.get("/categories");

       // 不会出现data中的  只是一个普通的全局变量而已！！
      this.categories = res.message;

      // 把数据存入到缓存中
      uni.setStorageSync("categories",{
        data:this.categories,
        time:Date.now()
      })

      this.menus = this.categories.map((item)=>item.cat_name)

      this.goods = this.categories[this.current].children
    },
    // 左侧标题的点击事件
    handleItemSelect(current) {
      this.current = current;
      this.goods = this.categories[this.current].children
    },
  },
};
</script>

<style lang="scss">
.category {
  /* 在小程序中 100vh 高度 不包含 底部tabbar！！！  */
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    display: flex;
    overflow: hidden;
    .menu {
      width: 182rpx;
      background-color: #f3f3f3;
      overflow: auto;
      .menu-item {
        display: flex;
        height: 74rpx;
        color: #666;
        justify-content: center;
        align-items: center;
      }
      .active {
        background-color: $themeColor;
        color: #fff;
      }
    }
    .content {
      flex: 1;
      overflow: auto;
      .goods-group {
        .goods-title {
          height: 74rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #666;
        }
        .goods-list {
          display: flex;
          flex-wrap: wrap;
          navigator {
            display: flex;
            flex-direction: column;
            width: 33.33%;
            margin: 15rpx 0;
            align-items: center;
            .goods-name {
              margin-top: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>